<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="欢迎来到limei的个人网站">
    <!--描述-->
    <meta name="keywords" content="博客,热爱旅行,摄影,设计与编程">
    <!--关键字-->
    <title>桂子飘香-个人网站,旅游,生活</title>
    <!--http://bitbug.net/将jpg转换成ico图标-->
    <!--ico图标就是放在网页开头的图标-->
    <!--link:favicon.ico + TAB-->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" class="ico">
    <!--https://www.iconfont.cn/阿里巴巴矢量图库-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="swiper/swiper.min.css">
</head>

<body>

<!--头部开始header star-->
<header class="top clearfix">
    <div class="w">
        <div class="logo fl">
            <h1><a href="index.html">
                <img src="img/logo.png" alt="">
            </a></h1>
        </div>
        <div class="nav fr">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">个人党</a></li>
                <li><a href="#">好友</a></li>
                <li><a href="#" class="iconfont icon-suosuo">&#xe782;</a></li>
            </ul>
        </div>
    </div>
</header>
<!--header stop-->

<!--轮播图lunbo star-->
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/banner01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/banner02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img/banner_03.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!--lunbo stop-->

<!--主函数main star-->
<div class="main">
    <div class="w">
        <h2>生活点滴,不忘记录</h2>
        <div class="btn">
            <a href="#">最新照片</a>
            <a href="#">面孔墙</a>
            <a href="#">视频</a>
            <a href="#">相册</a>
        </div>
        <ul class="tu">
            <li>
                <img src="img/section1.png" alt="">
                <div class="mask none">
                    <p>那些年我们曾经吃过的瓜</p>
                    <p>分享给你们</p>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>25</span>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>20</span>
                </div>
            </li>
            <li>
                <img src="img/section2.png" alt="">
                <div class="mask none">
                    <p>那些年我们曾经吃过的瓜</p>
                    <p>分享给你们</p>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>25</span>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>20</span>
                </div>
            </li>
            <li>
                <img src="img/section3.png" alt="">
                <div class="mask none">
                    <p>那些年我们曾经吃过的瓜</p>
                    <p>分享给你们</p>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>25</span>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>20</span>
                </div>
            </li>
            <li>
                <img src="img/section4.png" alt="">
                <div class="mask none">
                    <p>那些年我们曾经吃过的瓜</p>
                    <p>分享给你们</p>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>25</span>
                    <span class="iconfont icon-xxx">&#xe613;</span>
                    <span>20</span>
                </div>
            </li>
        </ul>
        <h3>更多图片</h3>
        <span class="iconfont icon-xxx" style="color: blue">&#xe613;</span>
        <div class="text">李梅寄语</div>
        <p class="content">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.
            Ad aspernatur atque, dicta
            dolores ex illum incidunt l
            abore maxime minus mollitia
            necessitatibus nulla, odit o
            fficia pariatur perspiciatis
            quis ratione voluptatem! Alia
            s dicta, ex possimus quae quos
            tempore unde! Alias atque iure
            libero qui quo. A alias culpa
            debitis delectus dolorem.
        </p>
    </div>
</div>
<!--main stop-->

<!--联系方式contact star-->
<div class="contact clearfix">
    <div class="w">
        <h2>联系方式</h2>
        <form class="message fl" action="#">
            <h2 class="message_h2">留言</h2>
            <input type="text" placeholder="姓名:">
            <input type="email" placeholder="邮箱:"><br>
            <textarea name="" id="" cols="90" rows="6" placeholder="留言内容"></textarea><br>
            <button>提交</button>
        </form>
        <div class="me fr">
            <h2 class="me_h2">联系我</h2>
            <p><span class="iconfont icon-xxx">&#xe612;</span><span>地址:广州市天河区积极创意小区</span></p>
            <p><span class="iconfont icon-xxx">&#xe60b;</span><span>邮编:1200000</span></p>
            <p><span class="iconfont icon-xxx">&#xe602;</span><span>手机:17324050845</span></p>
            <p><span class="iconfont icon-xxx">&#xe614;</span><span>电话:020-3424233</span></p>
            <p><span class="iconfont icon-xxx">&#xe610;</span><span>联系人:李梅</span></p>
            <p><span class="iconfont icon-xxx">&#xe639;</span><span>邮箱:limei@163.com</span></p>
        </div>
    </div>
</div>
<!--contact stop-->

<footer>
    <p>copyright @ 2018-2025 版权所有 李梅个人网站</p>
</footer>


<script src="js/jquery-3.4.1.js"></script>
<script src="js/indexJQ.js"></script>
<script src="swiper/swiper.min.js"></script>
<script src="js/swiper.js"></script>
</body>
</html>